import React from 'react';
import { Result, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons';

const Error404: React.FC = () => {
  const navigate = useNavigate();

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      background: '#f5f5f5'
    }}>
      <Result
        status="404"
        title="404"
        subTitle="抱歉，您访问的页面不存在。"
        extra={
          <div>
            <Button type="primary" icon={<HomeOutlined />} onClick={handleGoHome}>
              返回首页
            </Button>
            <Button 
              style={{ marginLeft: 8 }} 
              icon={<ArrowLeftOutlined />} 
              onClick={handleGoBack}
            >
              返回上页
            </Button>
          </div>
        }
      />
    </div>
  );
};

export default Error404;